<template>

	<!-- 自定义navbar组件【放在窗体外部，否则被content占据间距】 -->
	<CustomNavbar :navTitle="navTitle" :isTitleStyle="true"></CustomNavbar>

	<view class="container">
		<uni-section>
			<view class="example container">

				<uni-forms ref="valiForm" :rules="rules" :modelValue="dataForm">

					<uni-forms-item label="数据ID" required name="id">
						<uni-easyinput v-model="dataForm.id" disabled="" />
					</uni-forms-item>

					<uni-forms-item label="客户" name="customer_id">
						<uni-data-picker placeholder="请选择客户" popup-title="请选择客户" :localdata="customerList"
							v-model="dataForm.customer_id">
						</uni-data-picker>
					</uni-forms-item>
					
					<uni-forms-item label="商品" name="product_id">
						<uni-data-picker placeholder="请选择商品" popup-title="请选择商品" :localdata="productList" 
							@change="handleChange"
							v-model="dataForm.product_id">
						</uni-data-picker>
					</uni-forms-item>
					
					<uni-forms-item label="销售单价" required name="salePrice">
						<uni-easyinput v-model="dataForm.salePrice" />
					</uni-forms-item>
					
					<uni-forms-item label="数量" required name="number">
						<uni-easyinput v-model="dataForm.number" />
					</uni-forms-item>
					
					<uni-forms-item label="总价" required name="totalPrice">
						<uni-easyinput v-model="totalPrice" disabled="" />
					</uni-forms-item>
					
					<uni-forms-item label="备注" name="remark">
						<uni-easyinput type="textarea" v-model="dataForm.remark" placeholder="请输入备注" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submit('valiForm')" :disabled="isButtonDisabled" class="mt20 u-primary">提交</button>
				<button type="default" @click="handleReset('valiForm')" class="mt20">重置</button>
			</view>
		</uni-section>
	</view>
</template>

<script>
	import CustomNavbar from "@/components/CustomNavbar.vue"
	import qianTree from '@/components/Tree.vue';
	import {
		productApi,orderApi
	} from '@/utils/api.js'
	export default {
		components: {
			qianTree,
			CustomNavbar
		},
		data() {
			return {
				navTitle: '',
				customerList: [],
				productList: [],
				//表单数据
				dataForm: {
					id: '',
					customer_id: '',
					product_id: '',
					salePrice: 0,
					number: 1,
					totalPrice: 0,
					remark: '',
					create_time: ''
				},
				//校验规则
				rules: {
					customer_id: {
						rules: [{
							required: true,
							errorMessage: '请选择客户'
						}]
					},
					product_id: {
						rules: [{
							required: true,
							errorMessage: '请选择商品'
						}]
					},
				},
				imageList: [], //反显图片集合
				cusNo: '', //客户号
				selectimageIsShow: true, //添加图片功能按钮默认显示
				accessToken: '',
				isButtonDisabled: false, //提交按钮禁用
			}
		},
		computed: { //监听变量变化
		  totalPrice() {
		    return this.dataForm.salePrice * this.dataForm.number;
		  }
		},
		onLoad(options) {
			this.navTitle = options.navTitle
			this.initData()
			if (options.id) {
				
				this.isButtonDisabled = true; //禁用提交
				
				uni.showToast({
					title: '正在加载数据',
					icon: 'none',
					duration: 500
				});
			
				//赋值数据【编辑】
				orderApi.getSaleOrderList({
					id: options.id
				}).then(res => {
					if (res) {
						
						this.isButtonDisabled = false; //释放提交
						
						uni.showToast({
							title: '加载成功...',
							icon: 'none',
							duration: 500
						});
						
						this.dataForm = res.data[0];
						delete this.dataForm.delete_time; //删除对象属性【兼容后台保存】
						delete this.dataForm.title; //删除对象属性【兼容后台保存】
					}
				})
			}
		},
		methods: {
			initData() {
				productApi.getCustomerList({pageSize:10000}).then(res => {
					if (res) {
						this.customerList = res.data;
					}
				})
				productApi.getProductList({pageSize:10000}).then(res => {
					if (res) {
						this.productList = res.data;
					}
				})
			},
			//选中商品
			handleChange(e){
				const product_id = e.detail.value[0].value
				for (let i of this.productList) {
					if (i.id == product_id) {
						this.dataForm.salePrice = i.salePrice
					}
				}
			},
			//点击提交
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					this.dataForm.totalPrice = this.dataForm.salePrice * this.dataForm.number
					
					if (!this.dataForm.id) {
						this.dataForm.create_time = new Date().getTime(); //新增情况需要设置
					} 
					
					orderApi.updateSaleOrder(this.dataForm).then(res => {
						if (res) {
							uni.showToast({
								title: res.msg,
								icon: 'success',
								duration: 500
							});
							setTimeout(function() {
								uni.navigateTo({
									url: '/pages/order/sale/index'
								})
							}, 200)
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>
<style>
	/* 附件选择器样式 */
	.material-box {
		/* width: 686rpx; */
		padding: 20rpx;
		background: #fff;
		/* margin-top: 24rpx;
		margin-left: 32rpx;
		padding-bottom: 32rpx; */
		border-radius: 8rpx;

		.item-top {
			height: 50rpx;
			line-height: 50rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #333;
		}

		.material-item {
			width: 622rpx;
			border-radius: 8rpx;
			background: #f8f8f8;
			padding: 16rpx;
			margin-top: 24rpx;
			margin-left: 24rpx;

			.item-list {
				font-size: 28rpx;
				font-weight: 400;
				line-height: 56rpx;
				height: 56rpx;
				color: #B99C65;
			}
		}

		.material-select {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 24rpx;

			.material-png {
				width: 191rpx;
				height: 191rpx;
				border-radius: 12rpx;
				border: 2rpx dashed #B99C65;
				margin-right: 20rpx;
				margin-bottom: 16rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				background: #F8F8F8;

				.material-sent {
					width: 189rpx;
					height: 189rpx;
					background: rgba(245, 245, 245, 0.5);
					position: absolute;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.select-tips {
						width: 130rpx;
						height: 10rpx;
						margin-bottom: 12rpx;
					}

					.tips-text {
						font-size: 24rpx;
						color: #B99C65;
					}
				}

				.close-png {
					position: absolute;
					top: 0rpx;
					right: 20rpx;
					width: 40rpx;
					height: 40rpx;
					opacity: 0.6;
					color: red !important;
					z-index: 999;
				}

				.selected-png {
					width: 180rpx;
					height: 180rpx;
					border-radius: 12rpx;
					opacity: 1;

				}

				.selected-name {
					width: 180rpx;
					word-break: break-all;
					overflow: hidden;
				}

				.picture-png {
					width: 40rpx;
					height: 32rpx;
					margin-bottom: 8rpx;
				}

				.picture-text {
					font-size: 28rpx;
					height: 40rpx;
					line-height: 40rpx;
					color: #B99C65;
				}
			}
		}
	}
</style>